<template>
  <div class="search-window">
    <el-input placeholder="请输入搜索内容" v-model="querySearch" class="input" ></el-input>
    <el-row :gutter="20">
      <el-col :span="14" :offset="2">
        <transition-group>
          <ArticleItem v-for="article in pageInfo.list" :key="article.id" :article="article"></ArticleItem>
        </transition-group>
        <a href="#">
          <el-pagination
              background
              :hide-on-single-page="true"
              :current-page="pageInfo.current"
              :page-size="pageInfo.pageSize"
              layout=" prev, pager, next, jumper"
              :total="pageInfo.total"
              @current-change="handleCurrentChange"
          >
          </el-pagination>
        </a>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {getArticles} from "@/api/article";
import ArticleItem from "@/components/Article/ArticleItem";
import {brightKeyword} from "@/utils/handleSearch";
// 延迟函数
const delay = (function () {
  let timer = 0
  return function (callback, ms) {
    clearTimeout(timer)
    timer = setTimeout(callback, ms)
  }
})();
export default {
  name: "Search",
  components: {ArticleItem},
  data:function() {
return {
  // 请求约束
    querySearch:'',
    page:1,
    limit: 10,
    tag:'',
  // 请求到的数据
    pageInfo: {}
  };
},
  created() {
    this.getPageArticles(this.page,this.limit);
  },
  methods:{
    handleCurrentChange(page){
      // eslint-disable-next-line no-undef
      this.getPageArticles(page,this.limit);
    },
    getPageArticles(page,limit){
      let queryAll = this.querySearch.trim();
      getArticles({page,limit,queryAll})
          .then(response =>{
            if(response.data.code==null){
              this.pageInfo=response.data.data;
              console.log('改变之前的数据',this.pageInfo.list);
              for(let article of this.pageInfo.list){
                article.title=brightKeyword(article.title,this.querySearch);
                article.tabloid=brightKeyword(article.tabloid,this.querySearch)
                article.author=brightKeyword(article.author,this.querySearch)
              }
              console.log('改变之前的数据',this.pageInfo.list);
            }else{
              this.$notify.error({
                title: "提示",
                message:response.data.msg
              })
            }
          })
    }
  },
  watch: {
    querySearch() {
      delay(()=>{
        this.getPageArticles(this.page,this.limit)
      },300)
    }
  },
}
</script>

<style>
.search-window .input {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1000;
  left: 0;
  width: 916px;
  margin-bottom: 20px;
  margin-left: -400px;;
}
/*v-enter 是进入之前，元素的起始状态*/
/*v-leave-to 离开之后动画的终止状态*/
.search-window .v-enter,.v-leave-to{
  opacity:  0;/*透明度*/
  transform: translateX(150px);
}
/*入场(离场)动画的时间段   */
.search-window .v-enter-active,.search-window  .v-leave-active{
  transition: all 0.6s ease;
}
.search-window .my-enter,.search-window  .my-leave-to{
  opacity:  0;/*透明度*/
  transform: translateY(70px);
}
.search-window .my-enter-active,.search-window  .my-leave-active{
  transition: all 0.6s ease;
}
.search-window .el-textarea__inner,.search-window .el-input__inner{
  background-color: rgba(245, 246, 247,1) !important;
  font-weight: bold;
}
.search-window .el-textarea__inner:focus,.search-window .el-input__inner:focus{
  border: 1px blue solid;
  background-color: rgb(230, 247, 255) !important;
}
</style>
